<!--
 * @Author: dfh
 * @Date: 2024-03-19 17:30:08
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<!--
 * @Author: dfh
 * @Date: 2024-03-19 17:30:08
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <view class="flex ai-center jc-between card-wrap">
            <view class="left-box" @click="navigateTo('rate')" :class="bankList && bankList.length > 0 ? '' : 'flex-1'">
                <view class="flex ai-center jc-between">
                    <text class="txt-black-34 txt-30">实时汇率</text>
                    <text class="iconfont icon-arrow-right-bold"></text>
                </view>
                <view class="flex ai-center mt-10">
                    <view class="flex flex-col ai-center">
                        <text class="txt-black-34 txt-32">1.00</text>
                        <text class="txt-black-102 txt-20">{{ forData.currencyMaseterCh }}</text>
                    </view>
                    <view class="flex-1 txt-black-34 txt-36" style="text-align: center;">=</view>
                    <view class="flex flex-col ai-center">
                        <text class="txt-black-34 txt-32">{{ forData.exchangeRate }}</text>
                        <text class="txt-black-102 txt-20">{{ forData.currencySlaveCh }}</text>
                    </view>
                </view>
                <view class="flex ai-center">
                    <view class="flex ai-center" @click="onShowRateHandle('start')">
                        <image :src="forData.currencyMaseterIcon" style="width:32rpx;height:24rpx" />
                        <text class="txt-black-34 txt-24 ml-8">{{ forData.currencyMasterEn }}</text>
                    </view>
                    <view class="flex-1 iconfont icon-zhuanhuan" style="text-align: center;"
                        @click="onRateSwitchHandle"></view>
                    <view class="flex ai-center" @click="onShowRateHandle('end')">
                        <image :src="forData.currencySlaveIcon" style="width:32rpx;height:24rpx" />
                        <text class="txt-black-34 txt-24 ml-8">{{ forData.currencySlaveEn }}</text>
                    </view>
                </view>
            </view>
            <view class="right-box" v-if="bankList && bankList.length > 0">
                <view class="card-item" @click="noUseingFn">
                    <text class="txt-black-32 txt-28">境内预约攻略</text>
                    <text class="txt-black-102 txt-20 mt-10">国内开户银行预约</text>
                </view>
                <view class="card-item" @click="noUseingFn">
                    <text class="txt-black-32 ttxt-28">过港开户攻略</text>
                    <text class="txt-black-102 txt-20 mt-10">去港开户活动报名</text>
                </view>
            </view>
        </view>
        <view class="flex ai-center jc-between mt-30 card-wrap" v-if="bankList && bankList.length > 0">
            <view class="card flex jc-center" @click="navigateTo('article')">
                <text class="iconfont icon-gonglve mt-20" style="font-size: 60rpx;"></text>
                <view class="card-item">
                    <text class="txt-black-34 txt-28">查攻略</text>
                    <text class="txt-black-102 txt-20 mt-4">查看开户攻略</text>
                </view>
            </view>
            <view class="card flex jc-center" @click="navigateTo('openTest')">
                <text class="iconfont icon-ceshitimu mt-20" style="font-size: 56rpx;"></text>
                <view class="card-item">

                    <text class="txt-black-34 txt-28">做测试</text>
                    <text class="txt-black-102 txt-20 mt-4">开户资格自测</text>
                </view>
            </view>
            <view class="card flex jc-center" @click="noUseingFn">
                <text class="iconfont icon-huida mt-20" style="font-size: 54rpx;"></text>
                <view class="card-item">
                    <text class="txt-black-34 txt-28">去提问</text>
                    <text class="txt-black-102 txt-20 mt-4">向专家提问</text>
                </view>
            </view>
            <view class="card flex jc-center" @click="noUseingFn">
                <text class="iconfont icon-fulizhongxin mt-20" style="font-size: 60rpx;"></text>
                <view class="card-item">
                    <text class="txt-black-34 txt-28">领福利</text>
                    <text class="txt-black-102 txt-20 mt-4">领现金红包</text>
                </view>
            </view>
        </view>
        <RateSelect ref="rateEle" :data='currencyGroupObj' @onConfirm="onRateSelectHandle" />
    </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import RateSelect from './rate-select.vue';
import { fetchCurrencyGroupList, fetchExchangeRate } from '@/services/home';
import { showToast } from '@/utils/toast'
import { noUseingFn } from '@/utils/index'

defineProps({
    bankList: {
        type: Array,
        default: () => []
    }
})
const rateEle = ref('');
const forData = ref({
    currencyMasterEn: "CNY",
    currencyMaseterCh: '人民币',
    currencyMaseterIcon: '',
    currencySlaveEn: "HKD",
    currencySlaveCh: '港元',
    currencySlaveIcon: '',
    exchangeRate: 0.00
})
const currencyGroupObj = ref({});

onMounted(() => {
    getCurrencyGroupList();
    getExchangeRate();
})

const navigateTo = (type) => {
    let url = '';
    switch (type) {
        case 'rate':
            url = '/pages/realRate/index';
            break;
        case 'article':
            url = '/pages/bankCard/index?navIndex=1'
            break;
        case 'openTest':
            url = '/pages/bankCard/openTest'
            break;
    }
    uni.navigateTo({ url });
}

const onShowRateHandle = (type) => {
    rateEle.value.show(type);
}

const getCurrencyGroupList = async () => {
    const { msg, status, data } = await fetchCurrencyGroupList();
    if (status === 1) {
        currencyGroupObj.value = data || {}
        if (data && data['C']) {
            const item1 = data['C'].find(item => item.currencyEn === 'CNY');
            const item2 = data['H'].find(item => item.currencyEn === 'HKD');
            forData.value.currencyMaseterIcon = item1.currencyIcon
            forData.value.currencySlaveIcon = item2.currencyIcon
        }
    } else {
        showToast(msg || '获取利率分组')
    }
}

const getExchangeRate = async () => {
    const { msg, status, data } = await fetchExchangeRate(forData.value);
    if (status === 1) {
        forData.value.exchangeRate = data.exchangeRate || 0.00
    } else {
        showToast(msg || '查询汇率出错')
    }
}

const onRateSelectHandle = ({ type, data }) => {
    if (type == 'start') {
        forData.value.currencyMasterEn = data.currencyEn;
        forData.value.currencyMaseterCh = data.currencyZn;
        forData.value.currencyMaseterIcon = data.currencyIcon;
    } else {
        forData.value.currencySlaveEn = data.currencyEn;
        forData.value.currencySlaveCh = data.currencyZn;
        forData.value.currencySlaveIcon = data.currencyIcon;
    }
    getExchangeRate();
}

const onRateSwitchHandle = () => {
    const { currencyMasterEn, currencyMaseterCh, currencySlaveEn, currencySlaveCh, currencyMaseterIcon, currencySlaveIcon } = forData.value;
    forData.value.currencyMasterEn = currencySlaveEn;
    forData.value.currencyMaseterCh = currencySlaveCh;
    forData.value.currencyMaseterIcon = currencySlaveIcon;
    forData.value.currencySlaveEn = currencyMasterEn;
    forData.value.currencySlaveCh = currencyMaseterCh;
    forData.value.currencySlaveIcon = currencyMaseterIcon;
    getExchangeRate();
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 30rpx;
    padding: 0 20rpx;
    align-items: center;
    box-sizing: border-box;

    .card-wrap {
        width: 100%;
    }

    .left-box,
    .right-box {
        width: 346rpx; //170
        height: 240rpx; //220/2=110
        box-sizing: border-box;
    }

    .left-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 28rpx;
        padding: 30rpx;
        background-color: white;
        box-sizing: border-box;
    }

    .right-box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;

        .card-item {
            width: 100%;
            height: 110rpx;
            border-radius: 30rpx;
            padding-left: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            box-sizing: border-box;
            background-color: white;
        }
    }

    .card {
        position: relative;
        width: 164rpx;
        height: 178rpx;
        border-radius: 30rpx;
        box-sizing: border-box;
        background-color: white;

        .card-item {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 30rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
}
</style>